<template>
  <div class="image-component" :style="containerStyle">
    <el-image 
      :src="图片地址" 
      :fit="填充方式"
      :alt="替代文本"
      :style="imageStyle"
      @click="handleClick"
    >
      <div slot="error" class="image-error">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
  </div>
</template>

<script>
export default {
  name: 'ImageComponent',
  componentName: '图片',
  icon: 'el-icon-picture',
  defaultProps: {
    图片地址: 'https://via.placeholder.com/300x200',
    替代文本: '图片描述',
    宽度: '100%',
    高度: 'auto',
    填充方式: 'cover',
    圆角: '0px'
  },
  props: {
    图片地址: {
      type: String,
      default: 'https://via.placeholder.com/300x200'
    },
    替代文本: {
      type: String,
      default: '图片描述'
    },
    宽度: {
      type: String,
      default: '100%'
    },
    高度: {
      type: String,
      default: 'auto'
    },
    填充方式: {
      type: String,
      default: 'cover',
      validator: value => {
        return ['fill', 'contain', 'cover', 'none', 'scale-down'].includes(value);
      }
    },
    圆角: {
      type: String,
      default: '0px'
    }
  },
  computed: {
    containerStyle() {
      return {
        width: this.宽度,
        height: this.高度,
        borderRadius: this.圆角,
        overflow: 'hidden'
      };
    },
    imageStyle() {
      return {
        width: '100%',
        height: '100%',
        cursor: 'pointer'
      };
    }
  },
  methods: {
    handleClick() {
      // 可以在这里添加点击图片的处理逻辑
      console.log('Image clicked');
    }
  }
};
</script>

<style scoped>
.image-component {
  display: inline-block;
  position: relative;
}

.image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 30px;
}
</style>